<template>
  <div style="font-family: Arial, sans-serif; background-color: #f5f5f5; padding: 20px;">
    <!-- 头部搜索框 -->
    <div
        style="
        background: linear-gradient(90deg, #ff7300, #ff9c00);
        padding: 40px 20px;
        text-align: center;
        border-radius: 16px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
      "
    >
      <h1 style="color: white; margin: 0; font-size: 32px;">蜗牛旅行</h1>
      <p style="color: white; margin: 10px 0 20px; font-size: 18px;">发现世界的美好</p>
      <el-input
          v-model="searchQuery"
          placeholder="请输入目的地或关键词"
          style="width: 60%; margin-top: 20px;"
          clearable
      >
        <template #append>
          <el-button type="primary" style="background-color: #ff7300; border-color: #ff7300; font-size: 16px;">搜索</el-button>
        </template>
      </el-input>

      <!-- 动态背景光效 -->
      <div
          v-for="i in 5"
          :key="i"
          :style="{
          position: 'absolute',
          width: `${Math.random() * 100 + 50}px`,
          height: `${Math.random() * 100 + 50}px`,
          background: `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.2)`,
          borderRadius: '50%',
          top: `${Math.random() * 100}%`,
          left: `${Math.random() * 100}%`,
          transform: 'translate(-50%, -50%)',
          animation: `float-${i} 10s infinite ease-in-out`
        }"
      ></div>
    </div>

    <!-- 热门目的地 -->
    <div style="margin-top: 40px;">
      <h2 style="text-align: center; color: #333; font-size: 24px; font-weight: bold;">热门目的地</h2>
      <div style="display: flex; justify-content: space-around; margin-top: 20px;">
        <div
            v-for="(destination, index) in destinations"
            :key="index"
            style="
            text-align: center;
            width: 22%;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            border-radius: 16px;
          "
            @mouseover="hoverIndex = index"
            @mouseleave="hoverIndex = null"
        >
          <img
              :src="destination.image"
              alt="destination.name"
              style="width: 100%; height: 200px; object-fit: cover; border-radius: 16px; transition: transform 0.3s ease;"
              :style="{ transform: hoverIndex === index ? 'scale(1.1)' : 'scale(1)' }"
          />
          <div
              style="
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
              padding: 10px;
              color: white;
              font-size: 18px;
              font-weight: bold;
              opacity: 0;
              transition: opacity 0.3s ease;
            "
              :style="{ opacity: hoverIndex === index ? 1 : 0 }"
          >
            {{ destination.name }}
          </div>
        </div>
      </div>
    </div>

    <!-- 旅游分类 -->
    <div style="margin-top: 40px;">
      <h2 style="text-align: center; color: #333; font-size: 24px; font-weight: bold;">旅游分类</h2>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="6" v-for="(category, index) in categories" :key="index" style="text-align: center;">
          <div
              style="
              background-color: white;
              padding: 20px;
              border-radius: 16px;
              box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
              transition: transform 0.3s ease, box-shadow 0.3s ease;
              cursor: pointer;
              position: relative;
              overflow: hidden;
            "
              @mouseover="hoverCategory = index"
              @mouseleave="hoverCategory = null"
          >
            <img
                :src="category.icon"
                alt="category.name"
                style="width: 60px; height: 60px; transition: transform 0.3s ease;"
                :style="{ transform: hoverCategory === index ? 'scale(1.2)' : 'scale(1)' }"
            />
            <p style="margin-top: 10px; font-size: 18px; color: #333; font-weight: bold;">{{ category.name }}</p>
            <div
                style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 115, 0, 0.1);
                transform: scale(0);
                transition: transform 0.3s ease;
              "
                :style="{ transform: hoverCategory === index ? 'scale(1)' : 'scale(0)' }"
            ></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      hoverIndex: null,
      hoverCategory: null,
      destinations: [
        { name: '北京', image: '/slideshow/轮播图1.1jpg' },
        { name: '上海', image: '/slideshow/轮播2.2jpg' },
        { name: '广州', image: '/slideshow/轮播3.jpg' },
        { name: '成都', image: '/slideshow/轮播1.jpg' }
      ],
      categories: [
        { name: '国内游', icon: '/slideshow/轮播1.jpg' },
        { name: '出境游', icon: '/slideshow/轮播1.jpg' },
        { name: '周边游', icon: '/slideshow/轮播1.jpg' },
        { name: '自驾游', icon: '/slideshow/轮播1.jpg' }
      ]
    };
  }
};
</script>

<style scoped>
/* 动态背景光效动画 */
@keyframes float-1 {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
}

@keyframes float-2 {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
}

@keyframes float-3 {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
}
</style>